<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>万东影院 | 管理员</title>
  <link th:href="@{/images/logo.svg}" rel="icon" type="image/svg+xml">
  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/css/bootstrap-icons.min.css}" rel="stylesheet">
</head>
<body>
<header>
  <ul class="nav nav-tabs m-2">
    <li class="nav-item">
      <a class="nav-link disabled">
        <i class="bi bi-person-circle"></i>
        <span class="ms-1">管理员</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/admin/users}">
        <i class="bi bi-person-lines-fill"></i>
        <span class="ms-1">用户列表</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link active">
        <i class="bi bi-person-fill-gear"></i>
        <span class="ms-1">编辑用户</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/admin/log}">
        <i class="bi bi-journals"></i>
        <span class="ms-1">操作日志</span>
      </a>
    </li>
    <li class="nav-item ms-auto">
      <a class="nav-link" th:href="@{/me}">
        <i class="bi bi-person-gear"></i>
        <span class="ms-1">账号管理</span>
      </a>
    </li>
  </ul>
</header>
<main class="d-flex justify-content-center align-items-center">
  <div class="card w-25 mt-2 pb-1">
    <div class="d-flex my-2">
      <a class="btn btn-link w-auto" th:href="@{/admin/users}">返回</a>
    </div>
    <div class="d-flex mb-2">
      <p class="mx-auto h5">编辑用户信息</p>
    </div>
    <div class="d-flex justify-content-center">
      <i class="bi bi-person-square" style="font-size: 50px"></i>
    </div>
    <div class="container p-3">
      <form class="d-flex flex-column gap-2" id="form">
        <div>
          <label for="uidInput" class="form-label small">用户 ID</label>
          <input id="uidInput" class="form-control w-100"
                 th:value="${user.getId()}" disabled>
        </div>
        <div>
          <label for="usernameInput" class="form-label small">用户名</label>
          <input id="usernameInput" class="form-control w-100"
                 th:value="${user.getUsername()}" disabled>
        </div>
        <div>
          <label for="roleInput" class="form-label small">身份</label>
          <select id="roleInput" class="form-select w-100" name="role"
                  th:value="${user.getRole()}" th:disabled="${user.isAdmin()}">
            <option value="ROLE_ADMIN" th:if="${user.isAdmin()}"
                    th:selected="${user.isAdmin()}">管理员</option>
            <option value="ROLE_MANAGER" th:selected="${user.isManager()}">经理</option>
            <option value="ROLE_USER" th:selected="${user.isUser()}">普通用户</option>
          </select>
        </div>
        <div>
          <label for="phoneNumberInput" class="form-label small">手机号</label>
          <input id="phoneNumberInput" class="form-control w-100" name="phoneNumber"
                 th:value="${user.getPhoneNumber()}" th:disabled="${user.isAdmin()}">
        </div>
        <div>
          <label for="createdAtInput" class="form-label small">创建时间</label>
          <input id="createdAtInput" class="form-control p-2 w-100"
                 th:value="${user.getCreatedAt()}" disabled>
        </div>
        <div class="d-flex flex-wrap gap-2" th:if="${!user.isAdmin()}">
          <button class="btn btn-secondary flex-grow-1" type="reset">重置</button>
          <button class="btn btn-primary flex-grow-1"
                  type="submit" id="submitButton">保存</button>
        </div>
        <div class="alert alert-danger w-100 mt-2 mb-0 p-3" th:if="${user.isAdmin()}">
          <i class="bi bi-exclamation-triangle-fill"></i>
          <span class="ms-1">不能对管理员进行更改</span>
        </div>
      </form>
    </div>
  </div>
</main>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/axios.min.js}"></script>
<script>
  const id = document.getElementById("uidInput").value;
  const form = document.getElementById("form");
  const submitButton = document.getElementById("submitButton") || null;

  async function submitForm() {
    const formData = new FormData(form);

    const data = {};
    formData.forEach((value, key) => {
      data[key] = value;
    });

    try {
      const response = await axios.post(`/api/users/${id}`, data, {
        headers: {'Content-Type': 'application/json'}
      });

      if (response.status === 200) {
        alert("已保存修改");
        location.href = `/admin/users/${id}`
      }
    } catch (error) {
      if (!error.response) {
        console.log(error);
      }
      else if (error.response.status === 400) {
        alert(error.response.data);
      }
    }
  }

  function setSubmitButton() {
    submitButton.addEventListener("click", event => {
      event.preventDefault();
      submitForm();
    });
  }

  if (submitButton) {
    setSubmitButton();
  }

</script>
</body>
</html>